<template>
  <view>
    <view class="one">
      <view class="photo">
        <image src="../../static/image/avatar.png" mode=""></image>
      </view>
      <view class="photo2">
        <view class="list-cs">
          <view class="q" @click="onMineListBtn(1)">
            <view class="q_left">
              <view class="q_left_left">
                <image src="../../static/image/进行中.png" mode=""></image>
              </view>
              <view class="q_left_right">
                <text>进行中</text>
              </view>
            </view>
            <view class="q_right">
              <image src="../../static/image/右箭头.png" mode=""></image>
            </view>
          </view>
          <view class="q q2" @click="onMineListBtn(2)">
            <view class="q_left">
              <view class="q_left_left">
                <image src="../../static/image/已完成.png" mode=""></image>
              </view>
              <view class="q_left_right">
                <text>已完成</text>
              </view>
            </view>
            <view class="q_right">
              <image src="../../static/image/右箭头.png" mode=""></image>
            </view>
          </view>
          <view class="q" @click="onMineListBtn(3)">
            <view class="q_left">
              <view class="q_left_left">
                <image src="../../static/image/cancel_over.png" mode=""></image>
              </view>
              <view class="q_left_right">
                <text>已取消</text>
              </view>
            </view>
            <view class="q_right">
              <image src="../../static/image/右箭头.png" mode=""></image>
            </view>
          </view>
        </view>
      </view>
      <view class="photo3" @click="onMineListBtn(4)">
        <view class="list-cs">
          <view class="q">
            <view class="q_left">
              <view class="q_left_left">
                <image src="../../static/image/联系客服.png" mode=""></image>
              </view>
              <view class="q_left_right">
                <text>联系客服</text>
              </view>
            </view>
            <view class="q_right">
              <image src="../../static/image/右箭头.png" mode=""></image>
            </view>
          </view>
        </view>
      </view>
    </view>
 <movable/>
    <zdy-tabbar :current-page="3" @transfer="onTransferFun"></zdy-tabbar>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    // 父组件中的方法
    onTransferFun(m) {
      // this.show = true;
      uni.makePhoneCall({
        phoneNumber: "400-6933-110",
      });
    },
    onMineListBtn(index) {
      let data = {
        index: index,
      };
      uni.navigateTo({
        url:
          `/pages/orderGoods/orderGoods?data=` +
          encodeURIComponent(JSON.stringify(data)),
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.one {
  height: 100vh;
  padding-top: 15%;

  .photo {
    display: flex;
    justify-content: center;
    align-items: center;

    image {
      width: 120rpx;
      height: 120rpx;
    }
  }

  .photo2 {
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }

  .photo3 {
    display: flex;
    justify-content: center;
    margin-top: 10px;
  }

  .list-cs {
    width: 95%;
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(198, 198, 198, 0.5);
    padding: 20rpx;
    border-radius: 20rpx;

    .q {
      display: flex;
      justify-content: space-between;
      height: 130rpx;
      align-items: center;

      .q_left {
        display: flex;
        align-items: center;
        margin-left: 20rpx;

        .q_left_left {
          margin-right: 30rpx;
          display: flex;
          align-items: center;

          image {
            width: 50rpx;
            height: 50rpx;
          }
        }

        .q_left_right {
          text {
            font-weight: bold;
          }
        }
      }

      .q_right {
        margin-right: 20rpx;

        image {
          width: 30rpx;
          height: 40rpx;
        }
      }
    }

    .q2 {
      border-top: 1px solid #f5f5f5;
      border-bottom: 1px solid #f5f5f5;
    }
  }
}
</style>
